<template>
  <div>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item ref="name" label="案(事)件名称" prop="caseName">
        <a-input v-model="form.caseName" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="发生日期" required prop="occurrenceDate">
        <a-date-picker v-model="form.occurrenceDate" @change="onChange1" />
      </a-form-model-item>
      <a-form-model-item ref="name" label="发生地" prop="placeOccurrence">
        <a-select v-model="form.placeOccurrence" placeholder="请选择">
          <a-select-option v-for="item of this.diqu" :value="item.name" :key="item">
            {{ item.fullName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="name" label="发生地详址" prop="detailedAddress">
        <!--        <a-input v-model="form.detailedAddress"placeholder="请输入"/>-->
        <!--        {{positionList}}-->
        <!--        {{form.detailedAddress}}-->
        <a-select :show-search="true" :allowClear="false" :default-active-first-option="false" :show-arrow="false"
          :filter-option="false" :not-found-content="null" style="width: 100%" placeholder="请输入"
          v-model="form.detailedAddress" @search="onSearch" @change="onChange">
          <a-select-option v-for="(item, key) in positionList" :key="key" :value="item">
            {{ item.address }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="name" label="经纬度" prop="longitude">
        <a-input v-model="form.longitude" placeholder="经度" style="width: 45%;margin-right: 10%" />
        <a-input v-model="form.latitude" placeholder="纬度" style="width: 45%" />

      </a-form-model-item>
      <!--      <a-form-model-item label="案件发生开始时间" required prop="caseStartDate">-->
      <!--        <a-date-picker v-model="form.caseStartDate" @change="onChange2" />-->
      <!--      </a-form-model-item>-->
      <a-form-model-item label="侦察终结日期" required prop="terminationDate">
        <a-date-picker v-model="form.terminationDate" @change="onChange3" />
      </a-form-model-item>
      <a-form-model-item label="简要情况" prop="eventOverview">
        <a-input v-model="form.eventOverview" type="textarea" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item ref="from" label="上传附件">
        <j-upload v-model="fileListStr" @change="uploadChange" />
        <div style="color: #b1b1b1"> 支持扩展名：.rar .zip .doc .docx .pdf .jpg... </div>
        <!-- <a-button @click="showModal"> <a-icon type="upload" /> 上传附件 </a-button>
        <div v-if="bal">
          <span v-for="(item,index) of this.tiname" :key="index">{{ item }}，</span>
        </div>
        <div v-else style="color: #b1b1b1">
          支持扩展名：.rar .zip .doc .docx .pdf .jpg...
        </div> -->
      </a-form-model-item>
    </a-form-model>
    <!-- <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <Input ref="inpute" @title="nameTitle" @importData="inputse"></Input>
      </a-modal>
    </div> -->
    <Map ref="mapDrawId" @pisitionList="onPisitionList" />
  </div>
</template>

<script>
import { getDictItemsFromCache } from '@api/api'
import { getfrom } from '@api/xlgc/lawCase'
import Input from '@/views/xlgc/lawCase/LifeCase/detailed/ImportModal'
import Map from '@/views/xlgc/modules/map'
export default {
  name: 'Basic',
  components: { Input, Map },
  props: {
    basics: Number
  },
  data() {
    return {
      selects: undefined,
      positionList: [],
      visible: false,
      fileList: [],
      fileListStr: '',
      labelCol: { span: 10 },
      wrapperCol: { span: 6 },
      diqu: {},
      other: '',
      form: {
        terminationDate: '',
        placeOccurrence: undefined,
        occurrenceDate: '',
        caseName: '',
        detailedAddress: undefined,
        latitude: '',
        longitude: '',
        eventOverview: ''
      },
      rules: {
        caseName: [{ required: true, message: '请输入案事件名称', trigger: 'blur' }],
        occurrenceDate: [{ required: true, message: '请选择发生日期', trigger: 'blur' }],
        placeOccurrence: [{ required: true, message: '请输入发生地', trigger: 'blur' }],
        detailedAddress: [{ required: true, message: '请输入发生地详址', trigger: 'blur' }],
        caseStartDate: [{ required: true, message: '请选择时间段', trigger: 'blur' }],
        terminationDate: [{ required: true, message: '请选择时间段', trigger: 'blur' }],
        eventOverview: [
          { required: true, message: '事件概述', trigger: 'blur' },
          { min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ]
      },
      dateFormat: 'YYYY-MM-DD',
      passCheck: false,
      tiname: [],
      bal: false
    }
  },
  watch: {
    form: {
      deep: true,
      handler(a, b) {
        this.$emit('basicses', this.form)
        // this.submitForm()
      }
    },
    tiname: {
      deep: true,
      handler(a, b) {
        this.tiname = a
      }
    },
  },
  mounted() {
    getfrom()
      .then(res => {
        console.log(res)
        this.diqu = res.result
      })
      .catch(e => {
        this.$message.warn('请求失败！')
      })
  },
  methods: {
    setControl(obj, file) {
      this.form = obj
      if (file != undefined) {
        file.forEach(item => {
          // console.log("11111111111111111111")
          // console.log(item)
          var indexs = item.indexOf("i") //截取 http://172.16.26.81:9090/api后面的字符串
          var resolves = item.substring(indexs + 1, item.length);
          // console.log("222222222222222")
          // console.log(resolves)
          this.fileListStr += this.fileListStr + resolves
          // console.log(this.fileListStr)
        });
        // this.fileListStr = file
      }
    },
    // nameTitle(val){
    //   this.bal = true
    //   this.tiname.push(val)
    // },
    // 输入模糊搜索信息列表
    onPisitionList(arr) {
      console.log(arr)
      this.positionList = arr
    },
    onSearch(val) {
      console.log(val)
      if (val == '') {
        return
      }
      this.$refs.mapDrawId.getPositionList(val)
    },
    onChange(val) {
      if (val != undefined) { }
      console.log(val)
      this.form.detailedAddress = val.address
      this.form.latitude = val.latitude
      this.form.longitude = val.longitude
    },
    // inputse(val) {
    //   console.log(val)
    //   let arr = []
    //   arr.push(val)
    //   this.$emit('fileListse', arr)
    // },
    // showModal(val) {
    //   this.visible = true
    // },
    handleOk() {
      this.$refs.inpute.handleOk()
    },
    onChange1(date, dateString) {
      console.log(date, dateString)
      this.form.occurrenceDate = dateString
    },
    onChange2(date, dateString) {
      console.log(date, dateString)
      this.form.caseStartDate = dateString
    },
    onChange3(date, dateString) {
      console.log(date, dateString)
      this.form.terminationDate = dateString
    },
    uploadChange() {
      console.log(this.fileListStr)
      let fileLists = this.fileListStr.split(',')
      this.$emit('fileListse', fileLists)
    },
    // handleRemove(file) {
    //   const index = this.fileList.indexOf(file)
    //   const newFileList = this.fileList.slice()
    //   newFileList.splice(index, 1)
    //   this.fileList = newFileList
    // },
    // beforeUpload(file) {
    //   this.fileList = [...this.fileList, file]
    //   return false
    // },
    // resetForm() {
    //   this.$refs.ruleForm.resetFields();
    // },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.$emit('passCheck', valid)
        return valid
      })
    }

  },

}
</script>

<style scoped></style>
